<template>
	<view class="u-page">
		<u-sticky>
			<div style='height: 30px;'> </div>
		</u-sticky>
		<u-steps :current="current">
			<u-steps-item title="人员"></u-steps-item>
			<u-steps-item title="材料"></u-steps-item>
			<u-steps-item title="高空"></u-steps-item>
			<u-steps-item title="弱电"></u-steps-item>
			<u-steps-item title="交通"></u-steps-item>
			<u-steps-item title="用电"></u-steps-item>
			<u-steps-item title="其他"></u-steps-item>

		</u-steps>
		<u--form v-if='current==0' :borderBottom='true' labelPosition='top' labelWidth='700rpx' :model="formState" name="basic" layout="horizontal"	>

			<u-form-item :borderBottom='true' label="1 施工现场必须有指定的安全员,安全员必须持有省级住建部门颁发的相关资格证书" prop="name">
				<u-radio-group  v-model="CheckJsonArr[0]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="2 施工人员必须通过建设方组织的安全生产管理培训考试并取得资格证书,施工前身体健康精神容貌良好无饮酒宿醉" prop="name">
				<u-radio-group v-model="CheckJsonArr[1]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="3 施工人员是否购买足额保险" prop="name">
				<u-radio-group v-model="CheckJsonArr[2]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item  :borderBottom='true' label="4 施工人员安全培训是否合格,穿戴好防护用品" prop="name">
				<u-radio-group v-model="CheckJsonArr[3]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u--form>
		
		<u--form v-if='current==1' :borderBottom='true' labelPosition='top' labelWidth='auto' >
		
			<u-form-item label="5 现场施工材料必须堆放在指定地点,堆放材料不会被水浸,不会被车辆或行人破坏,不会被盗窃" prop="name">
				<u-radio-group  v-model="CheckJsonArr[4]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="6 现场施工材料应分类堆放,要有专人看守" prop="name">
				<u-radio-group v-model="CheckJsonArr[5]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="7 现场材料采用谁使用谁领取的原则,对未使用完的材料必须在下班前将剩余材料分类放置到材料堆放处,严禁施工人员将材料带出施工区域" prop="name">
				<u-radio-group v-model="CheckJsonArr[6]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>

		</u--form>
		
		<u--form v-if='current==2' :borderBottom='true' labelPosition='top' labelWidth='auto' >
		
			<u-form-item :borderBottom='true' label="8 高空作业(2米以上)时,登高人员必须具有国家相关部门颁发的登高作业证书,必须戴好安全帽,安全带,防滑鞋进行作业,作业前一定要对安全防护措施进行检查,恐高症,癫痫,昏厥及眩晕症,以及其他不适于高出作业疾患人员,不得从事高处作业" prop="name">
				<u-radio-group  v-model="CheckJsonArr[7]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="9 高空作业使用的人字梯型或竹梯的底部必须要有防滑橡胶垫，人字梯中部必须要有将两边连接在一起的物体;梯上有人作业时必须有专人扶梯" prop="name">
				<u-radio-group v-model="CheckJsonArr[8]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="10 登高人员上下塔杆就一步一扣在施工作业处上方的牢固构件上，不得在有尖锐棱角或有可能转动的部位施工作业面所有可坠落的物体，应一律先行拆除或加以固定后再进行施工" prop="name">
				<u-radio-group v-model="CheckJsonArr[9]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="11 户外高空施工作业尽可能晴朗无强风的白天进行，禁止在雷雨天气和晚间进行作业，避免在雨天和雪天进行作业，实在无法避免时，必须采取可靠的防滑、防寒和防冻措施，凡遇水、冰、霜、雪均应先清理后再施工" prop="name">
				<u-radio-group v-model="CheckJsonArr[10]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="12 高空作业时，所用材料应放置稳妥，所用工具应随手装入工具袋内，并随用随封口，防止坠落伤人，应让携带工具人员后上，下时先让携带工具人员先下，防止工具脱落伤人" prop="name">
				<u-radio-group v-model="CheckJsonArr[11]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="13 每次吊装前要对吊环、卸扣、吊带等起重用具进行检查，有损坏的要禁止使用，确认滑轮是否紧固，吊物是否正确地挂在吊钩上，起吊之前检查，检查并确认没有人处在可能被提起的起吊物撞到或刮到的位置上且下方禁止人员靠近" prop="name">
				<u-radio-group v-model="CheckJsonArr[12]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		
		</u--form>
		
		<u--form v-if='current==3' :borderBottom='true' labelPosition='top' labelWidth='auto' >
		
			<u-form-item :borderBottom='true' label="14 弱电线井内施工前，首先应征得业主同意，按照业主批准的路由进行光缆的布放和器件的安装" prop="name">
				<u-radio-group  v-model="CheckJsonArr[13]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="15 在进入线井内施工前，应对所用线进行检查，确定该线井是弱电电井，严禁破坏井内原有线缆和设备，布放线缆及安装器件时应用扎带绑扎牢固" prop="name">
				<u-radio-group v-model="CheckJsonArr[14]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="16 打开弱电井门后，施工人员首先用试电笔测试弱电井内金属设施是否存在漏电现象，确认无漏电后再进行施工作业" prop="name">
				<u-radio-group v-model="CheckJsonArr[15]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		
		</u--form>
		
		<u--form v-if='current==4' :borderBottom='true' labelPosition='top' labelWidth='auto' >
		
			<u-form-item :borderBottom='true' label="17 作业人员必须配备齐全安全防护用品（工作服安全帽反光背心等）且必须穿戴好防护用品" prop="name">
				<u-radio-group  v-model="CheckJsonArr[16]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="18 作业人员必须配备齐全安全防护用品（工作服安全帽反光背心等）且必须穿戴好防护用品" prop="name">
				<u-radio-group v-model="CheckJsonArr[17]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="19 作业人员在上在道路穿行，应做到一看二停三通过,禁止与车辆抢行,不得斜穿马路，不许嬉戏打闹" prop="name">
				<u-radio-group v-model="CheckJsonArr[18]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		<u-form-item :borderBottom='true' label="20 施工材料运输时候要避让来往车辆及行人，前后或左右设专人旗进行交通指挥，防止刮喷车辆及行人" prop="name">
			<u-radio-group v-model="CheckJsonArr[19]">
				<u-radio label="是" name="1">
				</u-radio>
				<u-radio label="无此项" name="0">
				</u-radio>
			</u-radio-group>
		</u-form-item>
		</u--form>
		
		<u--form v-if='current==5' :borderBottom='true' labelPosition='top' labelWidth='auto' >
		
			<u-form-item :borderBottom='true' label="21 现场操作人员必须具有国家相关颁发的电工作业证书，需注意强电、高压用电，防止触电事故发生，使用的电气设备必须是绝缘良好，各种电动机具应接地接零" prop="name">
				<u-radio-group  v-model="CheckJsonArr[20]">
					<u-radio label="是" name="1" checked>
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="22 各类临时用电线缆应无老化、破损、严禁将线头直接插入插座内取电" prop="name">
				<u-radio-group v-model="CheckJsonArr[21]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item :borderBottom='true' label="23 所有现场施工机械必须采用“一机、一眩”的用电保护，停用的设备必须拉闸断电,锁好开关箱" prop="name">
				<u-radio-group v-model="CheckJsonArr[22]">
					<u-radio label="是" name="1">
					</u-radio>
					<u-radio label="无此项" name="0">
					</u-radio>
				</u-radio-group>
			</u-form-item>

		</u--form>
		
		<u--form v-if='current==6' :borderBottom='true' labelPosition='left' labelWidth='auto' >
		
			<u-form-item :borderBottom='true' label="危险源" prop="name">
				<u-textarea v-model="formState.Danger"></u-textarea>
			</u-form-item>
			<u-form-item :borderBottom='true' label="注意事项" prop="name">
				<u-textarea v-model="formState.Remark"></u-textarea>
			</u-form-item>

		
		</u--form>
		<u-collapse  v-if='current==6' :value="['1','2','3','4']">
<!-- 			<u-collapse-item name="1" title="交底文件照片" icon="https://cdn.uviewui.com/uview/example/image.png">
				<u-upload :sizeType='["compressed"]' :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
					name="1" multiple itype='交底文件照片' :maxCount="10"></u-upload>
			</u-collapse-item> -->
			<u-collapse-item name="2" title="人员照片" icon="https://cdn.uviewui.com/uview/example/image.png">
				<u-upload :sizeType='["compressed"]' :fileList="fileList2" @afterRead="afterRead" @delete="deletePic"
					name="2" multiple itype='人员照片' :maxCount="10"></u-upload>
			</u-collapse-item>

			<u-collapse-item name="3" title="现场照片" icon="https://cdn.uviewui.com/uview/example/image.png">
				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					itype='现场照片' :sizeType='["compressed"]' :maxCount="10"></u-upload>
			</u-collapse-item>
			<u-collapse-item name="4" title="填报地点" icon="map-fill">
				<u--text margin="0 0 8px 0" type="info" prefixIcon="map" :text="formState.Addr">
				</u--text>
			</u-collapse-item>
		</u-collapse>
		<u-button type="primary" text="上一步" v-if="current!=0" :plain="true" @click="current=current-1"></u-button>
		<u-button type="primary" text="下一步" v-if="current!=6"  @click="current=current+1"></u-button>
		<u-button type="primary" text="提交" v-if="current==6" @click="modalShow = true"></u-button>
		<u-notify ref="uNotify"></u-notify>
		
		<u-modal :show="modalShow" title="提示" content='您已经清楚了解安全交底内容，确保此次施工安全，并对违反安全条例产生的后果负责。' @confirm="save"
		:showCancelButton="true" confirmText="提交" cancelText="再看一看" @cancel="modalShow = false" :closeOnClickOverlay="true" @close="modalShow = false"></u-modal>
		<u-toast ref="uToast" style="z-index: 999;"></u-toast>
		<u-loading-page :loading="loading" loading-text="正在定位" bg-color='rgba(0, 0, 0, 0.3)'></u-loading-page>
	</view>
</template>

<script>
	import coordtransform from 'coordtransform'
	import {
		baseUrl
	} from '@/common/config.js'
	import {
		mapGetters
	} from 'vuex'

	import {
		addbuildsafe,
		GetAddrByLatlng
	} from '@/common/api.js'
	export default {
		data() {
			return {
				CheckJson:"11111111111111111111111",
				CheckJsonArr:[],
				current:0,
				itypelist: {
					"1": "交底文件照片",
					"2": "人员照片",
					"3": "现场照片"
				},
				loading: false,
				formState: {
					Addr: ""
				},
				token:"",
				user:JSON.parse(uni.getStorageSync("$userinfo")),
				fileList1: [],
				fileList2: [],
				fileList3: [],
				buildid: null,
				modalShow: false,
				id: null,
				notifyData: {
					message: '保存成功',
					type: 'success',
					color: '#ffffff',
					bgColor: '',
					fontSize: 15,
					duration: 3000,
					safeAreaInsetTop: false
				},
			}
		},
		onLoad(option) {
			
			this.token = uni.getStorageSync("$token")
			this.CheckJsonArr= this.CheckJson.split('')
			this.buildid = option.buildid
			this.outlocation()
			if (option.id)
				this.getdate(option.id)
		},

		methods: {
			outlocation() {

				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: (res) => {
						console.log("定位结果" + res.longitude + "，" + res.latitude)
						// that.addrDel = res;
						this.outcenter = [res.longitude, res.latitude]
						//  this.outcenter = [parseFloat(res.longitude), parseFloat(res.latitude)]
						// this.outcenter = [111.11111, 11.111111]
						// this.view.goTo({
						// 	center: [res.longitude, res.latitude],
						// 	zoom: 15
						// });
						// this.outcenter = [119,24]
						// console.log(res.longitude)
						this.formState.Latlng = res.latitude + ',' + res.longitude
						var gcj02 = coordtransform.wgs84togcj02(res.longitude, res.latitude)
						console.log(gcj02);
						GetAddrByLatlng(gcj02[1] + "," + gcj02[0]).then(res2 => {
							console.log(res2);
							this.formState.Addr = res2;
							// this.Addr=res2

						})


						// this.formState.Addr = res2.result.formatted_addresses
						this.loading = false
					},
					fail: () => {
						// this.outcenter = [111.11111, 11.111111]
						// console.log("定位结果失败")
						// console.log(this)
						uni.showToast({
							title: '获取地址失败，将导致部分功能不可用',
							icon: 'none'
						});
					}
				});
				// this.outcenter = [119,24]
			},
			save() {
				if(this.fileList2.length == 0 || this.fileList3.length == 0){
					this.$refs.uToast.show({
						type: 'error',
						message: '请至少提交人员照片和现场照片各一张！',
						position: 'top',
					})
					this.modalShow = false
					return
				}
				this.formState.buildId = this.buildid
				this.formState.CheckJson = this.CheckJsonArr.join('')
				addbuildsafe(this.formState).then(res => {
					uni.setStorageSync("changed", "1")
					this.$refs.uNotify.show(this.notifyData)
					// uni.switchTab({

					// 	url: "/pages/index/buildimages"
					// })
					uni.navigateBack()
				})

			},
			getdate(id) {
				getbuilddailybyid(id).then(res => {
					this.formState = res.data
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event);
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, this.itypelist[event.name])
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, itype) {
				// console.log(this.user.Id)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${baseUrl}/SysFile/upload?outid=${this.formState.Id||this.user.Id}&type=${itype}`,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"Authorization": `Bearer ${this.token}`
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>

</style>
